<template>
  <div>
    <el-form :model="form" class="demo-form">
      <el-form-item label="Select Columns">
        <el-checkbox-group v-model="selectedColumns">
          <el-checkbox
            v-for="column in columnsOptions"
            :key="column.key"
            :value="column.key"
          >
            {{ column.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <!-- 固定列 -->
      <el-table-column prop="name" label="Name" fixed="left" />

      <!-- 选中的列 -->
      <el-table-column
        v-for="column in selectedColumns"
        :key="column"
        :prop="column"
        :label="getColumnLabel(column)"
        @click="handleCellClick(column)"
      >
        <template v-slot="scope">
          <span v-if="column === 'status'">
            <el-icon :size="20">
              <template v-if="scope.row.status === 'active'">
                <i class="el-icon-check" />
              </template>
              <template v-else>
                <i class="el-icon-close" />
              </template>
            </el-icon>
          </span>
          <span v-else>{{ scope.row[column] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <div>
      <age-range-picker v-model="ageRange" />
      <p>选中的年龄范围: {{ ageRange }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import AgeRangePicker from './AgeRangePicker.vue'
// import { columnsOptions, tableData } from '../data';
const form = reactive({})
const ageRange = ref('')
// 组件内部状态
const columnsOptions = [
  { key: 'name', label: 'Name' },
  { key: 'age', label: 'Age' },
  { key: 'email', label: 'Email' },
  { key: 'status', label: 'Status' },
  { key: 'sex', label: 'Sex' },
]
const tableData = [
  {
    name: 'Alice',
    age: 24,
    email: 'alice@example.com',
    status: 'active',
    sex: '男',
  },
  {
    name: 'Bob',
    age: 30,
    email: 'bob@example.com',
    status: 'inactive',
    sex: '男',
  },
  {
    name: 'Charlie',
    age: 28,
    email: 'charlie@example.com',
    status: 'active',
    sex: '男',
  },
]

// 勾选的列
const selectedColumns = ref(columnsOptions.map((col) => col.key))

// 获取列标签
const getColumnLabel = (key) => {
  const column = columnsOptions.find((col) => col.key === key)
  return column ? column.label : key
}

// 处理单元格点击事件
const handleCellClick = (column) => {
  console.log(`Clicked column: ${column}`)
}
</script>

<style scoped>
.demo-form {
  margin-bottom: 20px;
}
</style>